<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { useSettlementStore, useDictStore } from '@/store';
  import { useRouter } from 'vue-router';
  import dayjs from 'dayjs';

  const modalVisible = ref(false);
  const settlementStore = useSettlementStore();
  const router = useRouter();
  const dictStore = useDictStore();
  const detail = ref<any>({
    statusValue: '1',
  });
  const users = ref<any>([]);
  const searchForm = ref<any>({});
  const salesModalVisible = ref(false);

  async function fetchList() {
    const params = {
      ...searchForm.value,
    };
    if (params.tradeMonth) {
      params.tradeMonth = params.tradeMonth + '-01';
    }
    users.value = await settlementStore.getSettlements(params);
  }
  async function handleRemove(record: any) {
    await settlementStore.deleteSettlement({ id: record.id });
    await fetchList();
  }

  function handleAdd() {
    detail.value = { statusValue: '1' };
    modalVisible.value = true;
  }

  function handleEdit(record: any) {
    detail.value = record;
    modalVisible.value = true;
  }

  async function handleSave() {
    await settlementStore.saveSettlement(detail.value);
    await fetchList();
    modalVisible.value = false;
  }

  async function handleSearch() {
    await fetchList();
  }

  async function handleReset() {
    searchForm.value = {};
    await fetchList();
  }

  function handleViewSettlementDetail(record: any) {
    router.push({ name: 'FinanceSettlementDetail', params: { id: record.id } });
  }

  onMounted(() => {
    fetchList();
  });
</script>

<template>
  <div class="container">
    <breadcrumb :items="['menu.finance.management', 'menu.finance.list']" />
    <a-card>
      <a-row :gutter="16">
        <a-col flex="auto" style="padding-right: 16px">
          <a-row :gutter="16">
            <a-col :span="8">
              <a-form-item label="交易月份" style="margin-bottom: 0">
                <a-month-picker placeholder="请选择交易月份" v-model="searchForm.tradeMonth" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="结算状态" style="margin-bottom: 0">
                <a-select placeholder="请选择结算状态" allow-clear v-model="searchForm.statusValue">
                  <a-option :value="item.value" v-for="item in dictStore.list('SettlementStatus')">{{ item.label }}</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="发票状态" style="margin-bottom: 0">
                <a-select placeholder="请选择发票状态" allow-clear v-model="searchForm.invoiceStatusValue">
                  <a-option :value="item.value" v-for="item in dictStore.list('InvoiceStatus')">{{ item.label }}</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <!-- <a-col :span="14">
              <a-form-item label="创建时间" style="margin-bottom: 0">
                <a-range-picker v-model="searchForm.createdAt" style="width: 100%" show-time :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }" format="YYYY-MM-DD HH:mm" />
              </a-form-item>
            </a-col> -->
          </a-row>
        </a-col>
        <a-col flex="130px" style="border-left: 1px solid #e5e6eb; padding-left: 16px">
          <a-space>
            <a-button type="primary" @click="handleSearch()">搜索</a-button>
            <a-button type="primary" @click="handleReset()">重置</a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-divider margin="16px"></a-divider>
      <a-button type="primary" style="margin-bottom: 16px" @click="handleAdd" size="small">新增</a-button>
      <a-table :data="users">
        <template #columns>
          <a-table-column title="序号" :width="80">
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column title="销售人员" data-index="salesman.realName"></a-table-column>
          <a-table-column title="交易月份" data-index="transMonth" :width="150">
            <template #cell="{ record }">
              {{ dayjs(record.tradeMonth).format('YYYY-MM') }}
            </template>
          </a-table-column>
          <a-table-column title="结算状态" data-index="statusValue" :width="100">
            <template #cell="{ record }">
              <a-tag :color="dictStore.color('SettlementStatus', record.statusValue)">
                {{ dictStore.label('SettlementStatus', record.statusValue) }}
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column title="发票状态" data-index="invoiceStatusValue" :width="100">
            <template #cell="{ record }">
              <a-tag :color="dictStore.color('InvoiceStatus', record.invoiceStatusValue)">
                {{ dictStore.label('InvoiceStatus', record.invoiceStatusValue) }}
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column title="创建时间" data-index="createdAt" :width="180"></a-table-column>
          <a-table-column title="操作" :width="100">
            <template #cell="{ record }">
              <a-space style="margin-bottom: 6px">
                <!-- <a-button type="primary" size="mini" :disabled="record.invoiceUrl === null" @click="handleViewInvoice(record)">查看发票</a-button> -->
                <!-- <a-popconfirm content="请选择发票是否通过？" cancel-text="不通过" ok-text="通过" @ok="handlePass(record)" @cancel="handleNoPass(record)">
                  <a-button type="primary" size="mini">审核发票</a-button>
                </a-popconfirm> -->
              </a-space>
              <a-space>
                <a-button type="primary" @click="handleViewSettlementDetail(record)" size="mini">结算明细</a-button>
                <a-button type="primary" @click="handleEdit(record)" size="mini">编辑</a-button>
                <!--<a-popconfirm content="您确认移除么?" @ok="handleRemove(record)">
                  <a-button type="primary" status="danger" size="mini">移除</a-button>
                </a-popconfirm> -->
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>
    <a-modal :visible="modalVisible" :title="detail.id ? '编辑结算' : '新增结算'" @cancel="modalVisible = false" @ok="handleSave">
      <a-form :model="{}" auto-label-width>
        <a-form-item label="销售人员" required>
          <sales-picker :visible="salesModalVisible" v-model="detail.salesId" />
        </a-form-item>
        <a-form-item label="交易月份" required>
          <a-month-picker style="width: 100%" v-model="detail.tradeMonth" />
        </a-form-item>
        <a-form-item label="结算状态">
          <a-select placeholder="请选择结算状态" v-model="detail.statusValue">
            <a-option :value="item.value" v-for="item in dictStore.getDicts('SettlementStatus')">{{ item.label }}</a-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style lang="less" scoped>
  .container {
    padding: 0 16px;
  }
</style>
